<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学生管理系统</title>
    <link rel="stylesheet" href="./css/index.css" />
    <!-- 在最新官网复制的用unpkg，好像不行 -->
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->

    <!-- 使用CDN引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </head>
  <body>
    <!-- <div id="app111">{{msg}}</div> -->
    <div id="app">
      <el-container>
        <el-header style="height: 80px">学生管理系统</el-header>
        <el-container>
          <el-aside width="200px">
            <el-menu default-active="2" class="el-menu-vertical-demo">
              <el-menu-item index="1">
                <i class="el-icon-menu"></i>
                <span slot="title">班级管理</span>
              </el-menu-item>

              <el-menu-item index="2">
                <i class="el-icon-user"></i>
                <span slot="title">学生信息</span>
              </el-menu-item>

              <el-menu-item index="3" >
                <i class="el-icon-s-custom"></i>
                <span slot="title">讲师信息</span>
              </el-menu-item>

              <el-menu-item index="4">
                <i class="el-icon-document"></i>
                <span slot="title">课程管理</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-container>
            <el-main>Main</el-main>
            <el-footer style="height: 30px">Footer</el-footer>
          </el-container>
        </el-container>
      </el-container>
    </div>
  </body>
</html>

<!-- 在index.js中编写Vue实例代码 -->
<script src="./js/index.js"></script>

<!-- <script>
  const app = new Vue({
    // el属性用于绑定Vue实例的根元素
    el: "#app",
    // data属性用于存储应用状态
    data: {
      msg: "欢迎使用学生管理系统",
    },
  })();
</script> -->
